<template>
  <div class="app">
    <div class="bg">
      <img :src="detail.coverImgUrl" alt="" />
      <span class="playCount"
        >▶ {{ Math.floor(detail.playCount / 10000) }}万</span
      >
      <p class="title">{{ detail.name }}</p>
      <p class="description">{{ detail.description }}</p>
    </div>
    <div class="components">
      <span>订阅：{{ detail.subscribedCount }}</span>
      <span>评论：{{ detail.commentCount }}</span>
      <span>分享：{{ detail.shareCount }}</span>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item, index) in songs" :key="index">
          <div><img :src="item.al.picUrl" alt="" /></div>
          <div>
            <p>{{ item.al.name }}</p>
            <p>{{ item.ar[0].name }}</p>
          </div>
          <span>{{ item.dt }}</span>
          <div @click="handldPlay(item.id, item.name, item.al.picUrl)">
            <img src="../../assets/pause.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: [],
      songs: [],
    };
  },
  mounted() {
    var { id } = this.$route.params;
    console.log(id);
    this.$http(`http://47.108.197.28:3000/playlist/detail?id=${id}`).then(
      (res) => {
        console.log(res.data.playlist);
        this.detail = res.data.playlist;
        this.songs = this.detail.tracks;
        this.songs.forEach((item) => {
          item.dt = this.handleTime(item.dt);
        });
      }
    );
  },
  methods: {
    handleTime(num) {
      var seconds = Math.floor(num / 1000) % 60;
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      var minutes = Math.floor(num / 1000 / 60) % 60;
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      return minutes + ":" + seconds;
    },
    handldPlay(id, name, pic) {
      localStorage.setItem("pic", pic);
      this.$router.push(`/musicPlay?id=${id}&name=${name}`);
    },
  },
};
</script>

<style>
.app {
  position: relative;
  height: 100vh;
  width: 10rem;
  margin: auto;
  background-color: #f5f5f5;
}
.bg {
  width: 100%;
  height: 5.5rem;
  background-color: #413036;
  border-radius: 0 0% 10% 10%;
}
.bg img {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 200px;
  height: 200px;
  box-shadow: 10px 10px 0px 0 #695557;
}
.title {
  text-align: left;
  width: 400px;
  position: absolute;
  right: 20px;
  top: 8%;
  font-size: 30px;
  color: #fff;
}
.playCount {
  position: absolute;
  left: 22%;
  top: 8%;
  color: #f5f5f5;
}
.description {
  position: absolute;
  right: 20px;
  top: 20%;
  color: #f8f8f8;
  overflow: hidden;
  width: 400px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.components {
  position: absolute;
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 70px;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 70px;
  border-radius: 20px;
  background-color: #fff;
}
.list {
  padding-top: 0.5rem;
}
li {
  padding: 10px;
  height: 120px;
  display: flex;
  justify-content: space-between;
}
li img {
  width: 100px;
  height: 100px;
}
</style>